<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('租出车辆')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: bootstrap-select-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-car-rent" >
        <input name="carId" th:field="${car.carId}" type="hidden" readonly>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">车牌号：</label>
            <div class="col-sm-8">
                <input name="carLisenseNum" th:field="${car.carLisenseNum}" class="form-control" type="text" readonly>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label is-required">车牌型号：</label>
            <div class="col-sm-8">
                <input name="carModel" th:field="${car.carModel}" class="form-control" type="text" readonly>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label is-required">客户编号：</label>
            <div class="col-sm-8">
                <select class="form-control" id="custNo" name="custNo" required>
                    <option value="">--请选择客户--</option>
                    <option th:each="dict : ${customerList}" th:text="${#strings.concat(dict.custNo, ' - ', dict.custName)}" th:value="${dict.custNo}"></option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label is-required">租车时间：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    <input type="text" class="form-control" id="rent_datetime" name="rent_datetime" placeholder="yyyy-MM-dd HH:mm" required>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label is-required">预计还车时间：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    <input type="text" class="form-control" id="return_datetime" name="return_datetime" placeholder="yyyy-MM-dd HH:mm" required>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: select2-js" />
<th:block th:include="include :: bootstrap-select-js" />
<script th:inline="javascript">

    $("#rent_datetime").datetimepicker({
        format: "yyyy-mm-dd hh:ii",
        autoclose: true
    });

    $("#return_datetime").datetimepicker({
        format: "yyyy-mm-dd hh:ii",
        autoclose: true
    });

    var prefix = ctx + "lease/car";

    jQuery.validator.addMethod("dateCheck", function() {
        var startDate = $('#rent_datetime').val();
        var endDate = $('#return_datetime').val();
        try {
            var startTimeDate = new Date(Date.parse(startDate.replace(/-/g, "/"))).getTime();
            var endTimeDate = new Date(Date.parse(endDate.replace(/-/g, "/"))).getTime();
            if (endTimeDate > startTimeDate) {
                return true
            } else {
                return false
            }
        } catch (e) {
            return false
        }
    });
    jQuery.validator.addMethod("dateCheck1", function() {
        let startDate = $('#rent_datetime').val();
        if (startDate == ''){
            return false
        }
        try {
            let startTimeDate = new Date(Date.parse(startDate.replace(/-/g, "/"))).getTime();
            if (startTimeDate) {
                return true
            } else {
                return false
            }
        } catch (e) {
            return false
        }
    });
    jQuery.validator.addMethod("dateCheck2", function() {
        let endDate = $('#return_datetime').val();
        if (endDate == '') {
            return false
        }
        try {
            let TimeDate = new Date(Date.parse(endDate.replace(/-/g, "/"))).getTime();
            if (TimeDate) {
                return true
            } else {
                return false
            }
        } catch (e) {
            return false
        }
    });

    $("#form-car-rent").validate({
        focusCleanup: true,
        rules: {
            custNo: "required",
            rent_datetime: {
                dateCheck1: true,
            },
            return_datetime: {
                dateCheck2: true,
                dateCheck: true
            }
        },
        messages: {
            custNo: icon + "请选择客户",
            rent_datetime: {
                dateCheck1: icon + "请选择租出时间"
            },
            return_datetime: {
                dateCheck2: icon + "请选择预计还车时间",
                dateCheck: icon + "预计还车时间需大于租出时间"
            }
        }
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/rent", $('#form-car-rent').serialize());
            // $.modal.msgSuccess('订单提交成功，请前往订单管理确认！');
        }
    }
</script>
</body>
</html>